{literal} 
<script type="text/javascript">
	$(document).ready(function(){
		$(".additionalImage").click(changeImage);
		calculateItem();						 
	});

	function  calculateSingle(id){
		$(id +':checked').not(this).removeAttr('checked');
  		calculateItem();
	}

	function changeImage(){
  		var url = $(this).attr('src');
  		$("#mainImage").attr("src", url);
	}
</script>
{/literal}

<table width="100%" border="0" cellspacing="3" cellpadding="3">
  <tr>
    <td>
    	<div id="viewprod">
    		<form id="itemform" action="ajax.php?function=add-post" method="GET">
    			<div id="productImages">
      			<div id="mainImageContainer">
        				{if $item_image ne ""}
          				<img id="mainImage" draggable="false" src="UserFiles/Image/product_photos/thumbs/{$item_image}" />
        				{else}
          				<img id="mainImage" src="images/no_image.gif" />
        				{/if}
      			</div>

      			{if $additional_images.0.id ne ""}
        				<div id="additionalImages">
          				<img class="additionalImage" draggable="false" src="UserFiles/Image/product_photos/thumbs/{$item_image}"/>
          				
          				{foreach from=$additional_images item=ae}
            				<img class="additionalImage" draggable="false" src="UserFiles/Image/product_photos/thumbs/{$ae.value}"/>
          				{/foreach}
        				</div>
      			{/if}
    			</div>

    			<div class="itemInfo">
      			<h1>{$item_name}</h1>
      			{$item_desc}

      			<div class="quantity" >
        				<b>{$lang.cart_quantity_label}</b>
        				<input type="text" value="1" name="quantity" size="2" id="quantity" />         
      			</div>
					
					{foreach from=$newoptions item=opt}
        				<div class="option_set">
          				<span class="name">{$opt.name|stripslashes}</span>
          				{if $opt.max_toppings eq 0 and $opt.min_toppings eq 0}
            				{* don't show the label *}
          				{else}
            				{if $opt.max_toppings ne ""}
              					<span class="max_toppings">{$lang.viewprod_option_choose_max}&nbsp;{$opt.max_toppings}</span>
            				{/if}
            				
            				{if $opt.min_toppings ne ""}
              					<span class="max_toppings">{$lang.viewprod_option_choose_min}&nbsp;{$opt.min_toppings}</span>
            				{/if}
          				{/if} 
          			
          				<div class="optionlist">     
								{ if $opt.min_toppings eq "" } {* minimum toppings setting blank, use checkboxes  *}
									{foreach from=$opt.options item=opt_item}
              						<span class="optionchecks">
                						<input type="checkbox" name="options[]" value="({$opt.name}: {$opt_item.name}),{$opt_item.price}" 
                  						{if $opt.multi eq 0}  
                    							onclick="checkSet('{$opt.max_toppings}','{$opt.id}','option_{$opt_item.id}');calculateSingle('.unique_{$opt.id}')"
                  						{else}
                    							onclick="checkSet('{$opt.max_toppings}','{$opt.id}','option_{$opt_item.id}');calculateItem()"
                  						{/if} 
                  						class="optionset_{$opt.id} option_{$opt_item.id}{if $opt.multi eq 0}unique_{$opt.id}{/if}"
                					/> 
                					
                					{$opt_item.name|stripslashes} 
                					{if $opt_item.price ne 0  and $opt_item.price ne "" }
                						<em style="color:green">+{$opt_item.price|price_format}</em>
                					{/if}
              						</span>  
            					{/foreach}
            				{elseif $opt.min_toppings eq 1 and $opt.max_toppings eq 1} 
            				{* only allowed to select one option.  Let's turn that into a drop-down list. *}
									<select class="options {$opt.name|md5}" >
            						{foreach from=$opt.options item=opt_item}
              							<option value="{$opt_item.price}">
              								{$opt_item.name} 
              								{if $opt_item.price ne 0 and $opt_item.price ne "" }
              									({$opt_item.price|price_format})
              								{/if}
              							</option>
            						{/foreach}
            					</select>
            					
            					{literal}
            					<script type="text/javascript" >
              						$(function(){
            					{/literal}
                						var $select = $('.options.{$opt.name|md5}');
            					{literal}
                						$select.bind('change',calculateItem);
                						$select[0].selectedIndex[0] = 0;
                						$select.trigger('change');
              							});
            					</script>
            					{/literal}

				          {else} {* no min toppings setting *}
       						{foreach from=$opt.options item=opt_item}
               				<div class="optioninputs">
                 					<span>
				                  	{$opt_item.name|stripslashes} 
                   				
                   					{if $opt_item.price ne 0  and $opt_item.price ne "" }
                     					({$opt_item.price|price_format})
                   					{/if}
                 					</span>
                 					
                 					<input type="text" value="0"  size="3" name="min_option[{$opt_item.name}|{$opt_item.price}]" data-price="{$opt_item.price}" onkeyup="calculateItem();" oninput="calculateItem();" />  
               				</div>  
             				{/foreach}  
             			{/if} {* min_toppings *}
          			</div>
      			</div>
      		{/foreach}
      		
      		<div id="totalprice">
        			<span class="label">{$lang.cart_price_label}</span>
        			<span id="item_price" >{$current_price}</span>
      		</div>  

      		<input class="submit" type="submit" value="{$lang.cart_add_button}" onClick="Dialog('#thankyou','350','150');{if $config.popup eq 1}closeDialog();{/if}return false;" id="add-cart">
    		</div>
    		
    		<div style="clear:both"></div>
			
			<div class="instructions" > 
		      <p>{$lang.cart_special_instructions_label}</p>
		      <textarea name="instructions" ></textarea>
    		</div>
			
			<input type="hidden" id="final_price" name="final_price" value="{$current_price_nf}" />
    		<input type="hidden" id="final_options" name="final_options" />
    		<input type="hidden" id="final_price_type" name="final_price_type" />
    
    		<input type="hidden" name="desc" value="{$item_desc}">
    		<input type="hidden" name="name" value="{$item_name}">
   		<input type="hidden" name="cat" value="{$item_cat}">
    		<input type="hidden" name="id" value="{$item_id}">
    	</form>
    	
    	<div style="display:none">
    		<div id="thankyou" title="{$lang.cart_added_to_cart}">
    			<p>{$item_name} {$lang.cart_added}</p>
	    	</div>
  		</div>

  		<div id="add-cart">
    		<div id="message"></div>
  		</div>
	</div>
	&nbsp;
</td>
</tr>
</table>
